<template>
  <div class="page-container">
    <el-card class="order-detail-item" header="退款进度">
      <el-steps :active="step" finish-status="success" align-center>
        <el-step
          v-for="(item, index) in stepList"
          :key="index"
          :title="item.title"
          :description="item.time"
        />
      </el-steps>
    </el-card>
    <el-card class="order-detail-item" header="退款信息">
      <div class="order-item-box">
        <span class="order-item-info">付款方式：微信支付</span>
        <span class="order-item-info">支付流水号：111111</span>
        <span class="order-item-info">付款时间：2024-12-12 12:12:12</span>
        <span class="order-item-info">实付金额：0</span>
      </div>
    </el-card>
    <el-card class="order-detail-item" header="商品信息">
      <div class="order-item-box">
        <span class="order-item-info">付款方式：微信支付</span>
        <span class="order-item-info">支付流水号：111111</span>
        <span class="order-item-info">付款时间：2024-12-12 12:12:12</span>
        <span class="order-item-info">实付金额：0</span>
      </div>
    </el-card>
    <el-card class="order-detail-item" header="支付信息">
      <div class="order-item-box">
        <span class="order-item-info">付款方式：微信支付</span>
        <span class="order-item-info">支付流水号：111111</span>
        <span class="order-item-info">付款时间：2024-12-12 12:12:12</span>
        <span class="order-item-info">实付金额：0</span>
      </div>
    </el-card>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAY_METHOD } from '@/utils/enum'

export default {
  name: 'AfterSaleOrderDetail',
  data() {
    return {
      payMethodOptions: PAY_METHOD,
      form: {},
      loading: false,
      step: 1,
      stepList: [
        {
          title: '提交退款申请',
          time: '2022-12-12 12:00:00',
          status: 'success'
        },
        {
          title: '商家同意退款',
          status: 'process'
        },
        {
          title: '退款处理中'
        },
        {
          title: '退款完成'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'account', attrs },
        { label: '产品名称', prop: 'roleName', attrs },
        { label: '规则名称', prop: 'userName', attrs },
        { label: '零售价', prop: 'mobile', attrs },
        { label: '检验店铺', prop: 'mobile', attrs },
        { label: '产生时间', prop: 'sexStr', attrs },
        { label: '状态', slot: 'statusStr', attrs }
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '订单状态',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '支付方式',
          prop: 'roleName',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        enterpriseId: this.currentEnterprise.id,
        siteId: this.currentSite.id,
        ...formQuery
      }
      // getRoleList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [1], total: 0 })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/order/orderDetail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-item{
  margin-bottom: 20px;
}

.order-item-box{
  display: flex;
  flex-wrap: wrap;
  .order-item-info{
    line-height: 30px;
    width: 50%;
  }
}
</style>
